<!--
 * @Author: licongwei
 * @Date: 2022-03-07 16:32:57
 * @Description: 民生价格
-->
<template>
  <div class="P1">
    <div class="left">
      <div class="box box1">
        <left-top
          :adcode="adcode"
          :goodsIds="goodsId"
          @change="handLeGoodsChange"
          ref="leftTopRef"
        >
          <template #titleRight>
            <el-icon class="item-icon" @click="handIconClick('leftTop')">
              <ZoomIn />
            </el-icon>
          </template>
        </left-top>
      </div>
      <div class="box box2">
        <left-lower
          :adcode="adcode"
          :goodsIds="goodsId"
          :type="goodsName"
          @change="handLeGoodsChange"
          ref="leftLowRef"
        >
          <template #titleRight>
            <el-icon class="item-icon" @click="handIconClick('leftLow')">
              <ZoomIn />
            </el-icon>
          </template>
        </left-lower>
      </div>
    </div>
    <div class="center">
      <c-map
        :adCodes="adcode"
        :goodsId="goodsId"
        :adnames="adname"
        :type="goodsName"
        :unit="goodsUnit"
        :isJszsBars="isJszsBar"
        :zlbgoodsIds="zlbgoodsId"
        @change="changeMap"
        ref="cMapRef"
      ></c-map>
    </div>
    <div class="right">
      <div class="box box1" v-if="false">
        <c-r-zlb
          :adcode="adcode"
          :goodsId="goodsId"
          :isJszsBars="isJszsBar"
          @change="handZLBChange"
        ></c-r-zlb>
      </div>
      <div class="box box2">
        <c-r-36dzcsjgdb
          :goodsId="goodsId"
          :goodsName="goodsName"
          :zlbgoodsIds="zlbgoodsId"
          ref="dzcsRef"
        >
          <template #titleRight>
            <el-icon class="item-icon" @click="handIconClick('cR36dzcs')">
              <ZoomIn />
            </el-icon>
          </template>
        </c-r-36dzcsjgdb>
      </div>
      <div class="box box3">
        <jgzs
          :adCodes="adcode"
          :goodsId="isJszsBar ? zlbgoodsId : goodsId"
          :isJszsBar="isJszsBar"
          :adname="adname"
          :menuName="menuName"
          :menuId="menuId"
          ref="jgzsRef"
        >
          <template #titleRight>
            <el-icon class="item-icon" @click="handIconClick('jgzs')">
              <ZoomIn />
            </el-icon>
          </template>
        </jgzs>
      </div>
    </div>
    <div class="enlarge">
      <!-- :style="{
          'z-index': iconText !== null ? 10 : -1,
          opacity: iconText !== null ? 1 : 0
        }" -->
      <enlarge-vue
        class="enlarge-nav"
        :style="
          isTransition
            ? { 'z-index': 999, opacity: 1, top: '0px' }
            : { 'z-index': 0, opacity: 0, top: '100vh' }
        "
        @close="handIconClick('')"
      >
        <transition
          name="fade"
          :enter-from-class="transitionName"
          :leave-to-class="transitionName"
        >
          <component
            style="background-color: #001949"
            :is="iconText"
            :adcode="adcode"
            :goodsIds="goodsId"
            :goodsId="goodsId"
            :goodsName="goodsName"
            :zlbgoodsIds="zlbgoodsId"
            :type="goodsName"
            :isJszsBars="isJszsBar"
            :adCodes="adcode"
            :adname="adname"
            :menuName="menuName"
            :menuId="menuId"
          />
        </transition>
      </enlarge-vue>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, reactive } from 'vue'
import { useStore } from 'vuex'
import cMap from './cpns/map.vue'
import leftTop from './cpns/leftTop.vue'
import leftLower from './cpns/leftLower.vue'
import cRZlb from './cpns/rZlb.vue'
import cR36dzcsjgdb from './cpns/r36dzcsjgdb.vue'
import jgzs from './cpns/jgzs.vue'
import { ZoomIn } from '@element-plus/icons-vue'
import enlargeVue from './cpns/enlarge.vue'
import leftTopModal from './cpns/modal/leftTop.vue'
import leftLowModal from './cpns/modal/leftLower.vue'
import cR36dzcsModal from './cpns/modal/r36dzcsjgdb.vue'
import jgzsModal from './cpns/modal/jgzs.vue'

export default defineComponent({
  name: 'P1',
  components: {
    cMap,
    leftTop,
    leftLower,
    cRZlb,
    cR36dzcsjgdb,
    jgzs,
    ZoomIn,
    enlargeVue
  },
  setup() {
    const store = useStore()
    const leftTopRef = ref()
    const leftLowRef = ref()
    const jgzsRef = ref()
    const watchedState = computed(() => Object.values(store.state.globalDate))
    watch(watchedState, () => {
      leftTopRef.value?.refreshData()
      leftLowRef.value?.refreshData()
      jgzsRef.value?.refreshData()
    })
    // FIXME:废弃lowerData和zlbData，用goodsId代替，由相关人负责修改
    const goodsName = ref('')
    const goodsUnit = ref('')
    const goodsId = ref('')
    const zlbgoodsId = ref('')
    const isJszsBar = ref(false)
    const adcode = ref('')
    const adname = ref('新疆')
    const menuName = ref('')
    const menuId = ref('')
    // 只把需要的name和id传过来 为什么要把整个对象都传过来?
    const handLeGoodsChange = (id: string, name?: string, unit?: string) => {
      isJszsBar.value = false
      goodsId.value = id
      if (name) {
        goodsName.value = name
      }
      if (unit) {
        goodsUnit.value = unit
      }
    }
    // 这里也用goodsId代替
    const handZLBChange = (id: string, bool: boolean) => {
      if (id === '') {
        zlbgoodsId.value = goodsId.value
      } else {
        zlbgoodsId.value = id
      }
      isJszsBar.value = bool
    }
    const changeMap = (
      code: string,
      name: string,
      name2: string,
      code2: string
    ) => {
      adcode.value = code
      adname.value = name
      menuName.value = name2
      menuId.value = code2
      // jgzsRef.value?.changeName()
      // isJszsBar.value = false
    }
    const isTransition = ref(false)
    const transitionName = ref('')
    const iconText: any = ref('')
    const handIconClick = (str: any) => {
      let bool = true
      switch (str) {
        case 'leftTop':
          transitionName.value = 'leftTop-transition'
          iconText.value = leftTopModal
          break
        case 'leftLow':
          transitionName.value = 'leftLow-transition'
          iconText.value = leftLowModal
          break
        case 'cR36dzcs':
          transitionName.value = 'cR36dzcs-transition'
          iconText.value = cR36dzcsModal
          break
        case 'jgzs':
          transitionName.value = 'jgzs-transition'
          iconText.value = jgzsModal
          break
        default:
          bool = false
          iconText.value = ''
          break
      }
      store.commit('setScroll', bool)
    }
    watch(iconText, (newVal: any) => {
      if (newVal == '') {
        setTimeout(() => {
          isTransition.value = false
        }, 250)
      } else {
        isTransition.value = true
      }
    })
    return {
      handLeGoodsChange,
      handZLBChange,
      changeMap,
      handIconClick,
      isJszsBar,
      goodsId,
      zlbgoodsId,
      goodsName,
      goodsUnit,
      adcode,
      adname,
      menuName,
      menuId,
      leftTopRef,
      leftLowRef,
      jgzsRef,
      isTransition,
      transitionName,
      iconText
      // cMapRef,
      // dzcsRef,
    }
  }
})
</script>
<style lang="less" scoped>
.P1 {
  display: flex;
  color: #fff;
  position: relative;
  .box {
    overflow: hidden;
  }
  ::v-deep(.slot-right) {
    text-align: right;
  }
  .item-icon {
    cursor: pointer;
    z-index: 2;
    font-size: 25px;
    margin-top: 12px;
    margin-right: 12px;
    &:hover {
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .left {
    flex: 0 0 465px;
  }
  .center {
    flex: 1;
  }
  // .right {
  //   flex: 0 0 465px;
  //   display: flex;
  //   flex-direction: column;
  //   .box1 {
  //     flex: 0 0 170px;
  //   }
  //   .box2 {
  //     flex: 0 0 215px;
  //     // margin-bottom: 15px;
  //     margin: 15px 0px;
  //   }
  //   .box3 {
  //     flex: 1;
  //   }
  // }
  .right {
    flex: 0 0 465px;
    display: flex;
    flex-direction: column;
    .box1 {
      flex: 0 0 170px;
    }
    .box2 {
      // flex: 0 0 220px;
      // margin: 15px 0;
      flex: 0 0 320px;
      margin-bottom: 15px;
    }
    .box3 {
      flex: 1;
    }
  }
  .enlarge-nav {
    float: left;
  }
  //进入过度
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s;
  }
  //·进入完成
  .fade-enter-to,
  .fade-leave-from {
    transform: translate3d(0px, 0px, 0px) scale(1);
  }

  // 涨跌幅
  .leftTop-transition {
    transform: translate3d(-676px, -126px, 0) scale(0.7);
  }
  // 本期价格
  .leftLow-transition {
    transform: translate3d(-659px, 325px, 0) scale(0.65);
  }
  // 地图
  .map-transition {
    transform: translate3d(17px, -31px, 0) scale(0.8);
  }
  // 36大中城市
  .cR36dzcs-transition {
    transform: translate3d(696px, -234px, 0) scale(0.7);
  }
  // 价格走势
  .jgzs-transition {
    transform: translate3d(696px, 91px, 0) scale(0.7);
  }
}
</style>
